<template>
    <el-input v-model="localValue"
              :disabled="disabled"
              :readonly="readonly"
              :placeholder="placeholder"
              :clearable="clearable"
              v-on:focus="handleFocus($event)"
              v-on:blur="handleBlur($event)"
              v-on:change="emitChange"
              v-on:input="emitInput"
    >
        <file-upload v-model="localUploadValue"
                     ref="fileUpload"
                     slot="prepend"
                     :disabled="disabled"
                     :limit="1"
                     :accept="accept"
                     :data="data"
                     :show-file-list="false"
                     :multiple="false"
                     list-type="text"
                     :name="name"
                     :action="action"
                     :response-value-format="responseValueFormat"
                     :null-action-message="nullActionMessage"
                     v-on:input="emitUploadInput"></file-upload>
        <el-button slot="append" v-if="canPreview" @click="preview">预览</el-button>
    </el-input>
</template>

<script>
    import {endWithAny} from '../../tools/StringTools.js'
    import FileUpload from './FileUpload'
    export default {
        name: 'FileUploadInput',
        components: {
            FileUpload
        },
        props: {
            value:{
                type: String
            },
            name: {
                type: String
            },
            clearable:{
                type: Boolean
            },
            placeholder:{
                type: String
            },
            // 是否禁用
            disabled:{
                type:Boolean,
                default:false
            },
            readonly:{
                type:Boolean,
                default:false
            },
            // 接受上传的文件类型
            //image/jpeg image/*
            accept: {
                type: [String,Function]
            },
            // 上传时附带的额外参数
            data: {
                type: Object
            },
            // 数据响应值格式化
            responseValueFormat:{
                type: Function
            },
            // 上传url
            action: {
                type: [String,Function]
            },
            nullActionMessage:{
                type:  String,
                default: '上传的url不能为空'
            },
            showPreviewButton:{
                type: Boolean,
                default: true
            }
        },
        computed:{
            canPreview(){
                return this.showPreviewButton && this.localValue && (this.accept && this.accept.indexOf('image') >=0 || endWithAny(this.localValue,['jpg','png','gif'],true))
            },
        },
        data (){
            return {
                localValue: this.value,
                localUploadValue: this.value
            }
        },
        methods:{
            handleFocus (event) {
                this.$emit('focus', event)
            },
            handleBlur (event) {
                this.$emit('blur', event)
            },
            emitChange (val) {
                this.$emit('change', val)
            },
            emitInput (val) {
                this.$emit('input', val)
            },
            emitUploadInput (val) {
                this.localValue = val
                this.$emit('input', val)
            },

            // 预览
            preview (){
                this.$refs.fileUpload.onPreview({
                    url: this.value
                })
            }
        },
        watch: {
            value(val){
                this.localValue = val
                this.localUploadValue = val
            }
        }
    }
</script>
